<template>
  <div class="shoppingListGoodsList">
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            <div class="banner-title" style="font-size: 20px;">谷子</div>
          </template>
          <template #right>
            <div @click="manageLists()">管理</div>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 购物清单列表 -->
      <div class="shoppingList-list">
        <div class="shoppingList-item panel">
          <div class="shoppingList-item-t">
            <div class="shoppingList-item-title">
              <div class="panel-title-icon"></div>
              {{ shoppingList.shoppingListTitle }}
            </div>
            <div class="shoppingList-item-edit">编辑</div>
          </div>
          <div class="shoppingList-item-c">
            <div class="shoppingList-item-info">
              <div class="shoppingList-item-emoji shoppingList-icon">{{ shoppingList.icon }}</div>
              <div class="shoppingList-item-name">
                <div class="text">{{ shoppingList.shoppingTitle }}</div>
                <div class="shoppingList---notes">{{ shoppingList.shoppingNotes }}</div>
              </div>
            </div>
            <div class="shoppingList-item-count">
              <div class="shoppingList-item-count-total">￥{{ shoppingList.totalMoney }}</div>
              <div class="shoppingList-item-count-ed">{{ shoppingList.totalNum }}/{{ shoppingList.purchasedNum }}件
              </div>
            </div>
          </div>
          <div class="shoppingList-item-b">
            <div class="shoppingList-item-rule rule-active">预购{{ shoppingList.startTime }}开始</div>
            <div class="shoppingList-item-rule">预购{{ shoppingList.stopTime }}结束</div>
          </div>
        </div>
      </div>
      <!-- 完成进度 -->
      <div class="savingsPlan-progress panel">
        <div class="progress-t">
          <div class="progress-savings">已完成:{{ spEd }}</div>
          <div class="progress-surplus">剩余:{{ spSurplus }}</div>
        </div>
        <div class="progress-b">
          <div class="progress-bar">
            <div class="progress-bar-achieve" :style="{ 'width': spAchieve + '%' }"></div>
          </div>
          <div class="progress-text">{{ spAchieve.toFixed(2) }}%</div>
        </div>
        <div class="progress-date">
          <div>开始:{{ shoppingList.startTime }}</div>
          <div>结束:{{ shoppingList.stopTime }}</div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="shoppingListGoodsList-list panel">
        <!-- 标题 -->
        <div class="shoppingListGoodsList-item-t">
          <div class="shoppingListGoodsList-item-title">
            <div class="panel-title-icon"></div>
            商品列表
          </div>
          <div class="shoppingListGoodsList-item-edit" @click="toAddGoods()">添加</div>
        </div>
        <!-- 列表 -->
        <div class="shoppingListGoodsList-list-item" v-for="(goods, index) in shoppingList.goodsList" :key="goods.id">
          <div class="shoppingListGoodsList-item-c">
            <div class="shoppingListGoodsList-item-checkbox">
              <div class="shoppingListGoodsList-item---checkbox" :class="goods.state == '0' ? '' : 'check'"
                @click="createABill()">
                <van-icon name="success" color="#fff" />
              </div>
            </div>
            <div class="shoppingListGoodsList-item-box" @click="openUpdatePopup(goods)">
              <div class="shoppingListGoodsList-item-info">
                <div class="shoppingList-icon">{{ goods.icon }}</div>
                <div class="shoppingListGoodsList-item-name">
                  <div class="shoppingListGoodsList-item-text">
                    <div class="shoppingListGoodsList---title">{{ goods.title }}</div>
                    <div class="shoppingListGoodsList---state" :class="goods.state == '0' ? '' : 'ed'">
                      {{ goods.state == '0' ? '未完成' : '已完成' }}
                    </div>
                  </div>
                  <div class="shoppingList---notes">{{ goods.notes }}</div>
                </div>
              </div>
              <div class="shoppingListGoodsList-item-count">
                <div>￥{{ goods.totalMoney }}</div>
                <div class="shoppingListGoodsList-item-count-ed">单价:{{ goods.unitPrice }}/{{ goods.totalNum }}件</div>
                <div class="shoppingListGoodsList-rate">
                  <van-rate v-model="goods.rateVal" readonly icon="star" void-icon="star-o" color="rgb(254,194,7)" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- nothing -->
        <Nothing :tag="nothingTag" v-if="false" />
      </div>
    </div>
    <!-- 底部 -->
    <div class="main-b">
      <van-popup v-model:show="updateShow" position="bottom" round
        :style="{ padding: '64px', backgroundColor: 'rgb(240, 240, 240)' }">
        <div class="update-popup">
          <div class="title-box">
            <van-nav-bar>
              <template #title>
                <div class="banner-title" style="font-size: 20px;">商品</div>
              </template>
              <template #right>
                <div class="btn">
                  <div class="update">修改</div>
                  <div class="state">未完成</div>
                </div>
              </template>
            </van-nav-bar>
          </div>
          <div class="plan">
            <div class="shoppingListGoodsList-list-item panel">
              <div class="shoppingListGoodsList-item-title">
                <div class="panel-title-icon"></div>
                商品列表
              </div>
              <div class="shoppingListGoodsList-item-c">
                <div class="shoppingListGoodsList-item-box">
                  <div class="shoppingListGoodsList-item-info">
                    <div class="shoppingList-icon">{{ updateGoods.icon }}</div>
                    <div class="shoppingListGoodsList-item-name">
                      <div class="shoppingListGoodsList-item-text">
                        <div class="shoppingListGoodsList---title">{{ updateGoods.title }}</div>
                        <div class="shoppingListGoodsList---state" :class="updateGoods.state == '0' ? '' : 'ed'">
                          {{ updateGoods.state == '0' ? '未完成' : '已完成' }}
                        </div>
                      </div>
                      <div class="shoppingList---notes">{{ updateGoods.notes }}</div>
                    </div>
                  </div>
                  <div class="shoppingListGoodsList-item-count">
                    <div>￥{{ updateGoods.totalMoney }}</div>
                    <div class="shoppingListGoodsList-item-count-ed">单价:{{ updateGoods.unitPrice }}/{{
                      updateGoods.totalNum
                    }}件
                    </div>
                    <div class="shoppingListGoodsList-rate">
                      <van-rate v-model="updateGoods.rateVal" readonly icon="star" void-icon="star-o"
                        color="rgb(254,194,7)" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="shoppingListGoodsList-relatedBills panel">
              <div class="shoppingListGoodsList-item-title">
                <div class="panel-title-icon"></div>
                关联账单
              </div>
              <div class="shoppingListGoodsList-relatedBills-bill">
                <div class="shoppingListGoodsList-item-c" v-if="true">
                  <div class="shoppingListGoodsList-item-box">
                    <div class="shoppingListGoodsList-item-info">
                      <div class="shoppingList-icon">{{ updateGoods.icon }}</div>
                      <div class="shoppingListGoodsList-item-name">
                        <div class="shoppingListGoodsList-item-text">
                          <div class="shoppingListGoodsList---title">{{ updateGoods.title }}</div>
                          <div class="shoppingListGoodsList---state ed">购物清单</div>
                        </div>
                        <div class="shoppingList---notes">{{ updateGoods.notes }}</div>
                      </div>
                    </div>
                    <div class="shoppingListGoodsList-item-count">
                      <div>￥{{ updateGoods.totalMoney }}</div>
                    </div>
                  </div>
                </div>
                <div class="shoppingListGoodsList-nothing" v-if="false">
                  没有关联账单
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script setup lang="ts" name="shoppingListGoodsList">
// 购物清单详情
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import Nothing from '@/components/Nothing.vue'

const router = useRouter()

const nothingTag = ref("还没有发现清单哦")

let spTotal = ref(2) // 总数量
let spEd = ref(1) // 已完成数量
let spAchieve = computed({ // 已完成进度 / 进度条宽度
  get() {
    return (spEd.value / spTotal.value) * 100
  },
  set() { }
})
let spSurplus = computed({ // 剩余金额
  get() {
    return spTotal.value - spEd.value
  },
  set() { }
})

// 购物清单信息
let shoppingList = reactive(
  {
    id: 'ouvoaajg01',
    shoppingListTitle: '可以尝试添加一个待购清单👀~',
    shoppingTitle: '谷子',
    shoppingNotes: '测试',
    icon: '🤓',
    totalMoney: '200.00',
    purchasedNum: 0,
    totalNum: 0,
    startTime: '2025-02-06 12:57',
    stopTime: '2025-02-06 12:57',
    goodsList: [
      {
        id: 'goodslifuahv01',
        state: '0', // 0 未完成 1 完成
        icon: '🤓',
        title: '雪未来',
        notes: '测试',
        totalMoney: '39.00',
        unitPrice: '13.00',
        totalNum: 3,
        rateVal: 5,
      },
      {
        id: 'goodslifuahv01',
        state: '1', // 0 未完成 1 完成
        icon: '😼',
        title: '魔法未来',
        notes: '测试2',
        totalMoney: '1000.00',
        unitPrice: '200.00',
        totalNum: 5,
        rateVal: 5,
      }
    ]
  }
)

// 修改弹出层
let updateShow = ref(false)
let updateGoods = shoppingList.goodsList[0]

// 返回上一页
function back() {
  router.go(-1)
}

// 管理清单
function manageLists() {
  console.log('管理清单')
}

// 创建一笔账单
function createABill() {
  console.log('创建一笔账单')
}

// 跳转到 添加商品页面
function toAddGoods(){
  router.push("./addGoods")
}

// 打开修改弹出层
function openUpdatePopup(goods:any) {
  updateGoods = goods
  console.log(goods)
  updateShow.value = true
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);
@grayBgColor: rgb(240, 240, 240);

.shoppingListGoodsList {
  position: relative;
  height: 100vh;
  width: 100%;
}

.shoppingListGoodsList-list-item,
.shoppingListGoodsList-relatedBills-bill {
  .shoppingListGoodsList-item-c {
    display: flex;
    align-items: center;
    margin: 15px 0;

    .shoppingListGoodsList-item-checkbox {
      width: 8%;

      .shoppingListGoodsList-item---checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border: 2px solid gray;
        border-radius: 5px;
      }

      .shoppingListGoodsList-item---checkbox.check {
        border-color: #fff;
        background: @gabelBgColor;
      }
    }

    .shoppingListGoodsList-item-box {
      width: 92%;
      display: flex;

      .shoppingListGoodsList-item-info {
        display: flex;
        align-items: center;

        .shoppingListGoodsList-item-name {
          .shoppingListGoodsList-item-text {
            display: flex;
            align-items: center;
            width: 280px;

            .shoppingListGoodsList---title {
              max-width: 90px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .shoppingListGoodsList---state {
              text-align: center;
              width: 48px;
              margin-left: 10px;
              font-size: 16px;
              color: #3b3b3b;
              text-overflow: nowrap;
              background-color: rgb(254, 161, 3);
              border-radius: 12px;
              padding: 0 5px;
              padding-bottom: 1px;
            }

            .shoppingListGoodsList---state.ed {
              background-color: @gabelBgColor;
            }
          }

          .shoppingListGoodsList---notes {
            color: #343434;
            font-size: 16px;
          }
        }
      }
    }

    .shoppingListGoodsList-item-count {
      font-size: 40px;
      font-weight: 600;
      text-align: right;

      .shoppingListGoodsList-item-count-ed {
        font-size: 26px;
        font-weight: 500;
        color: @garyFontColor;
      }
    }
  }
}

.main-t {
  // margin-bottom: 1.8rem;
}

.main-c {
  margin: @gabelMargin;
  height: 70vh;

  .shoppingList-list {
    font-size: 33px;

    .shoppingList-item {
      .shoppingList-item-t {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .shoppingList-item-title {
          display: flex;
          align-items: center;
        }

        .shoppingList-item-edit {
          background-color: rgb(234, 234, 234);
          color: @garyFontColor;
          padding: 10px;
          font-size: 23px;
          border-radius: 20px;
        }
      }

      .shoppingList-item-c {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 15px 0;

        .shoppingList-item-info {
          display: flex;
          align-items: center;
        }

        .shoppingList-item-count {
          text-align: right;

          .shoppingList-item-count-ed {
            font-size: 22px;
            color: @garyFontColor;
          }
        }
      }

      .shoppingList-item-b {
        display: flex;
        font-size: 25px;
        color: @garyFontColor;

        .shoppingList-item-rule {
          padding: 1px 6px;
          margin-right: 10px;
          border: 1px solid rgb(169, 169, 169);
          border-radius: 12px;
        }

        .rule-active {
          color: #343434;
          background-color: @gabelBgColor;
        }
      }
    }
  }

  .savingsPlan-progress {
    font-size: 30px;

    .progress-t {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .progress-b {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      .progress-bar {
        width: 81%;
        height: 15px;
        border-radius: 10px;
        background-color: rgb(241, 241, 241);
        overflow: hidden;

        .progress-bar-achieve {
          height: 100%;
          width: 0%;
          background-color: @gabelBgColor;
        }
      }
    }

    .progress-date {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }
  }

  .shoppingListGoodsList-list {
    height: 50vh;
    font-size: 33px;

    .shoppingListGoodsList-item-t {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .shoppingListGoodsList-item-title {
        display: flex;
        align-items: center;
      }

      .shoppingListGoodsList-item-edit {
        background-color: rgb(243, 220, 185);
        color: black;
        padding: 10px;
        font-size: 23px;
        border-radius: 20px;
      }
    }
  }

}

.shoppingList---notes {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #343434;
  max-width: 165px;
  font-size: 16px;
}

.main-b {
  .update-popup {
    margin: @gabelMargin;

    .title-box {
      .btn {
        display: flex;
        font-size: 30px;

        .update {
          color: #343434;
          background-color: rgb(241, 241, 241);
          margin-right: 10px;
        }

        .state {
          color: #343434;
          background-color: rgb(244, 219, 188);
        }
      }

      .btn>div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        border-radius: 20px;
        padding: 0 10px;
      }
    }

    .plan {
      font-size: 33px;

      .shoppingListGoodsList-item-title {
        display: flex;
        align-items: center;
      }

      .shoppingListGoodsList-item-c {
        .shoppingListGoodsList-item-box {
          width: 100%;
          justify-content: space-between;
        }
      }

      .shoppingListGoodsList-relatedBills-bill {
        .shoppingListGoodsList-item-box {
          align-items: center;
        }

        .shoppingListGoodsList-item-count {
          color: red;
        }

        .shoppingListGoodsList---state{
          width: 68px !important;
        }
      }
    }
  }
}
</style>